<template>
    <div style="height: 100%; overflow: hidden">
        <el-container style="height: 100%">
            <el-header style="padding: 0px; height: 50px">
                <TitleBar ref="titlebar"> </TitleBar>
            </el-header>
            <el-container style="height: calc(100% - 50px)">
                <el-aside style="padding: 0px; width: 64px; height: 100%">
                    <NavBar :_current_panel="_current_panel" @select-panel="onSelectPanel"></NavBar>
                </el-aside>
                <HomePanel ref="home_panel" v-if="_current_panel === 'home_panel'" @load-dataset="onLoadDataset">
                </HomePanel>
                <ToolPanel ref="tool_panel" v-if="_current_panel === 'tool_panel'" @select-panel="onSelectPanel">
                </ToolPanel>
                <GridPanel ref="grid_panel" v-if="_current_panel === 'grid_panel'" @select-panel="onSelectPanel">
                </GridPanel>
                <ModelPanel ref="model_panel" v-if="_current_panel === 'model_panel'"></ModelPanel>
                <RemotePanel ref="remote_panel" v-if="_current_panel === 'remote_panel'"></RemotePanel>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import API from '@/js/api';
import LabelConfig from '@/js/models/LabelConfig';
import { ref, onMounted, onUnmounted, getCurrentInstance, nextTick, provide } from 'vue';
import TitleBar from '@/components/TitleBar.vue';
import NavBar from '@/components/NavBar.vue';
import HomePanel from '@/components/HomePages/HomePanel.vue';
import ToolPanel from '@/components/ToolPages/ToolPanel.vue';
import ModelPanel from '@/components/ModelPages/ModelPanel.vue';
import GridPanel from './components/GridPages/GridPanel.vue';
import RemotePanel from './components/RemotePages/RemotePanel.vue';

// vue属性定义
const name = 'App';
const { proxy } = getCurrentInstance();
provide('vueApp', { monitorKeyEvent, setMachine, setAlgoType, getAlgoType, getMachine });

const methods = {
    toggleConsole: toggleConsole
};

// 定义变量
let _key_event_monitor = true;
let _algo_type = {
    supertype: 'vision',
    type: 'detection'
};

const _current_panel = ref('home_panel');
const _current_dataset_id = ref('');

// 切换面板
async function onSelectPanel(panel) {
    _current_panel.value = panel;
    if (panel == 'tool_panel') {
        await nextTick();
        proxy.$refs.tool_panel.loadDataset(_current_dataset_id.value);
    }
}

// vue函数定义和实现
async function onLoadDataset(info) {
    // console.log('App.vue onLoadDataset dataset_id = ', dataset_id);
    _current_panel.value = info.panel;
    _current_dataset_id.value = info.dataset_id;
    await nextTick();
    proxy.$refs[info.panel].loadDataset(info.dataset_id);
}

// 定义窗口中的快捷键
async function handleKeyDown(event) {
    if (!_key_event_monitor) {
        return;
    }
    // console.log('App.vue handleKeyDown event = ', event);
    LabelConfig.runShortCuts('App', methods, event);
    if (_current_panel.value == 'tool_panel') {
        proxy.$refs.tool_panel && proxy.$refs.tool_panel.handleKeyDown(event);
    } else if (_current_panel.value == 'grid_panel') {
        proxy.$refs.grid_panel && proxy.$refs.grid_panel.handleKeyDown(event);
    } else if (_current_panel.value == 'model_panel') {
        proxy.$refs.model_panel && proxy.$refs.model_panel.handleKeyDown(event);
    } else if (_current_panel.value == 'remote_panel') {
    }
}

async function toggleConsole() {
    let result = await API.local.invoke('ToggleConsole');
    console.log(result);
}

function monitorKeyEvent(monitor) {
    // console.log('monitorKeyEvent monitor = ', monitor);
    _key_event_monitor = monitor;
}

function setMachine(machine) {
    proxy.$refs.titlebar.setMachine(machine);
}

function getMachine() {
    return proxy.$refs.titlebar.getMachine();
}

// 设置数据集和模型的类型
function setAlgoType(typeInfo) {
    _algo_type = typeInfo;
}

function getAlgoType() {
    return _algo_type;
}

onMounted(() => {
    document.addEventListener('keydown', handleKeyDown);
});

onUnmounted(() => {
    document.removeEventListener('keydown', handleKeyDown);
});
</script>

<style scoped>
.el-header {
    height: 50px;
}

.el-aside {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: unset;
}

.remote-sidebar {
    padding: 0px;
    width: 200px;
    height: 100%;
    overflow: hidden;
}
</style>
